<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-08-30 17:28:46
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-19 09:29:51
 * @FilePath: \dcy-web\apps\admin\pages\user-management\components\RoleMember.vue
 * @Description: 角色成员
-->
<script setup lang="ts">
import formateDate from '@/utils/formateDate'
import { getAccountListPage, getDepartmentListReq } from "@/api/system/user/index"

const props = defineProps<{
  roleId: string
}>()

const total = ref(0)
const tableData = ref([]) as any

const showSearch = ref(true)
const departmentList = ref() // 院/部

const queryParams = ref<any>({
   page: 1,
   size: 20,
   roleId: props.roleId,
   codeOrName: '',
   codeOrPhone: '',
   departmentId: undefined,
})
// 搜索条件组件配置数据
const conditionComponents = ref<any>([
  {
    type: 0,
    key: 'codeOrName',
    value: '',
    width: "220px",
    placeholder: '请输入姓名'
  },
  {
    type: 0,
    key: 'codeOrPhone',
    value: '',
    width: "220px",
    placeholder: '请输入工号或手机号'
  },
  {
    type: 1,
    key: 'departmentId',
    value: '单选框',
    width: "220px",
    placeholder: '院校（部）',
    config: {
      options: departmentList.value
    }
  },
])

const columns = ref([{
  title: '序号',
  dataIndex: 'key',
  width: 48,
  formatter: (_row: any, _column: any, _cellValue: any, index: number) => {
    return index + 1
  }
}, {
  title: '工号',
  dataIndex: 'code',
}, {
  title: '姓名',
  dataIndex: 'name',
}, {
  title: '所属院校(部)',
  dataIndex: 'departmentName',
},{
  title: '手机号',
  dataIndex: 'phone',
}, {
  title: '创建人',
  dataIndex: 'createdByName',
}, {
  title: '创建时间',
  dataIndex: 'createdTime',
  formatter: (row: any) => {
    return formateDate(row.createdTime).format('YYYY.MM.DD HH:mm:ss')
  }
}]) as any

// 获取学院/部列表
const { run: getDepartmentList } = useRequest(getDepartmentListReq, {
	manual: true,
	onSuccess: (res: any) => {
		res?.forEach((item) => {
			item.title = item.departmentName
			item.value = item.departmentId
    })
    departmentList.value = res
    conditionComponents.value[2].config.options = departmentList.value
	}
})
getDepartmentList()

// 查询列表
const { run: getAccountList, loading } = useRequest(getAccountListPage, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data: any) => {
    tableData.value = data.content || []
    total.value = data.totalElements
  },
  // 请求失败
  onError: () => {
  },
})

// 过滤查询
function onSearch() {
  getAccountList(queryParams.value)
}

// 条件过滤
function formSearch(params){
   queryParams.value = {
      ...queryParams.value,
      ...params,
   }
   onSearch()
}
watch(() => props.roleId, (id: string) => {
  queryParams.value.roleId = id
  if(id)
    onSearch()
}, {
  immediate: true, // 立即执行
})


</script>

<template>
  <div class="form-top">
    <SearchBar :components="conditionComponents" @search="formSearch" class="mb-[16px]" />
  </div>
  <div class="exercise_table">
    <TableForm
      :auto-height="true"
      :data="tableData"
      :columns="columns"
      :tableLoading="loading"
      :total-count="total"
      v-model:showSearch="showSearch"
      :showToolBar="false"
      @refresh="formSearch"
    >
      <template #key="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </TableForm>
  </div>
</template>

<style lang="scss" scoped>
</style>
